<template>
  <div class="app_content_container">
    <Breadcrumb :items="[{ label: '标签管理', path: '/tag-mgmt' }, name]" />
    <div class="app_content_box">
      <BorderBox title="基本信息">
        <template #main_info>
          <ga-descriptions
            size="large"
            :column="3"
            :align="{ label: 'right' }"
            :label-style="{ width: '70px' }"
            :value-style="{ minWidth: '180px' }"
          >
            <ga-descriptions-item label="名称">
              {{ info?.name || "-" }}
            </ga-descriptions-item>
            <ga-descriptions-item label="创建人">
              {{ info?.createBy || "-" }}
            </ga-descriptions-item>
            <ga-descriptions-item label="创建时间">
              {{ info?.createTime || "-" }}
            </ga-descriptions-item>
            <ga-descriptions-item label="开启状态">
              <TagStatus :type="info?.required" />
            </ga-descriptions-item>
            <ga-descriptions-item label="描述">
              {{ info?.remark || "-" }}
            </ga-descriptions-item>
          </ga-descriptions>
        </template>
      </BorderBox>
      <BorderBox title="选项列表" :wrapperStyle="{ margin: '16px 0' }">
        <template #title_r>
          <ga-button type="primary" @click="$refs.addOrEditRef.open()"> 新增 </ga-button>
        </template>
        <template #main_info>
          <BaseTable
            :apiUrl="getOptionsList"
            :rowId="id"
            isPadding0
            ref="baseTableRef"
            :columns="columns"
            height="100%"
            :isShowAddBtn="false"
          >
            <template #action="{ record }">
              <ga-link @click="$refs.addOrEditRef.open(record)">编辑</ga-link>
              <ga-link status="danger" @click="handleDelete([record])">删除</ga-link>
            </template>
          </BaseTable>
        </template>
      </BorderBox>
    </div>
    <addOrEdit ref="addOrEditRef" @fetchData="$refs.baseTableRef.fetchData()" />
  </div>
</template>

<script setup>
import { ref, onMounted } from "vue";
import { useRoute } from "vue-router";
import { getOptionsList, getLabelDetail, deleteOptions } from "@/api/tagMgmt";
import TagStatus from "@/components/TagStatus/index.vue";
import addOrEdit from "./addOrEdit.vue";
import { warningModal } from "@/hooks/useWarningModal";
import { Message } from "@garco-design/web-vue";
const route = useRoute();
const { name } = route.query;
const { id } = route.params;
const info = ref({});
const baseTableRef = ref(null);
// 删除方法
const handleDelete = (records) => {
  const ids = records.map((item) => ({ id: item.id }));
  warningModal(`确定要删除数据-[${records[0].label}]`, async () => {
    try {
      await deleteOptions(id, ids);
      Message.success("操作成功");
      baseTableRef.value.fetchData();
    } catch (err) {
      console.log(err);
    }
  });
};
// 获取列表
const fetchLabelData = async () => {
  try {
    const { data } = await getLabelDetail(id);
    info.value = data || {};
  } finally {
  }
};
const columns = [
  {
    title: "Label",
    dataIndex: "label",
  },
  {
    title: "Value",
    dataIndex: "value",
  },
  {
    title: "备注",
    dataIndex: "remark",
    render: ({ record }) => record?.remark || "-",
  },
  {
    title: "操作",
    dataIndex: "action",
    slotName: "action",
    width: 120,
  },
];
onMounted(() => {
  fetchLabelData();
});
</script>

<style lang="scss" scoped>
.app_content_box {
  padding: 0 16px;
}
</style>
